<!DOCTYPE html>
<html>
<head>

	<meta http-equiv="Content-type" content="text/html; charset=utf-8">

	<title>Test Bidi support for Menu Item</title>

	<style type="text/css">
		@import "../../../../dijit/themes/claro/document.css";
		@import "../../../../dijit/tests/css/dijitTests.css";

		body { padding: 0; }

		/* styling for left-hand-side navigation menu to become a column equal to length of page */
		#formattingTable {
			border: 0;
			border-spacing: 0;
		}
		#contentContainer { padding: 2em; }

		#navMenu {
			/* make the sidebar menu blend in with the whole sidebar */
			border: none;
		}
	</style>

	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css"/>

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../../dojo/dojo.js"
		data-dojo-config="parseOnLoad: true, isDebug: true, has: { 'dojo-bidi': true }"></script>

	<script type="text/javascript">
		dojo.require("dijit.Menu");
		dojo.require("dijit.MenuItem");
		dojo.require("dijit.PopupMenuItem");
		dojo.require("dijit.CheckedMenuItem");
		dojo.require("dijit.MenuSeparator");

		dojo.require("dijit.MenuBar");
		dojo.require("dijit.MenuBarItem");
		dojo.require("dijit.PopupMenuBarItem");

		dojo.require("dijit.ColorPalette");
		dojo.require("dijit.form.TextBox");
		dojo.require("doh.runner");

		dojo.require("dojo.parser");	// scan page for widgets and instantiate them
	</script>

	<script type="text/javascript">
		function createMenu(){
			// create a menu programmatically
			function fClick(){console.log("clicked!")}

			pMenu = new dijit.Menu({targetNodeIds:["prog_menu"], id:"progMenu"});
			pMenu.addChild(new dijit.MenuItem({label:"Programmatic Context Menu", disabled:true}));
			pMenu.addChild(new dijit.MenuSeparator());
			pMenu.addChild(new dijit.MenuItem({label:"\u05e9\u05dc\u05d5\u05dd\u0021\u0021 rtl", onClick:fClick, accelKey:"Shift+S", textDir:"rtl", id:"progItemRtl"}));
			pMenu.addChild(new dijit.MenuItem({label:"Another menu item...", onClick:fClick, accelKey:"Ctrl+A",  textDir:"ltr", id:"progItemLtr"}));
			pMenu.addChild(new dijit.MenuItem({label:"With an icon", iconClass:"dijitEditorIcon dijitEditorIconCut", onClick:fClick}));
			var mItem = new dijit.MenuItem({label:"dojo.event clicking!! auto", accelKey: "Alt+D", textDir:"auto", id:"progItemAuto1"});
			dojo.connect(mItem, "onClick", function(){console.log("click! handler created via dojo.connect()")});
			pMenu.addChild(mItem);
			mItem = new dijit.CheckedMenuItem({label:"\u05e9\u05dc\u05d5\u05dd\u0021\u0021 auto", textDir:"auto", id:"progItemAuto2"});
			pMenu.addChild(mItem);

			var pSubMenu = new dijit.Menu({parentMenu:pMenu, id:"progSubMenu"});
			pSubMenu.addChild(new dijit.MenuItem({label:"Submenu item", onClick:fClick}));
			pSubMenu.addChild(new dijit.MenuItem({label:"Submenu item", onClick:fClick}));

			var pSubSubMenu = new dijit.Menu({parentMenu:pSubMenu, id:"progSubSubMenu"});
			pSubSubMenu.addChild(new dijit.MenuItem({label:"SubSubmenu item", onClick:fClick}));
			pSubSubMenu.addChild(new dijit.MenuItem({label:"SubSubmenu item", onClick:fClick}));
			pSubMenu.addChild(new dijit.PopupMenuItem({label:"SubSubmenu rtl...", popup:pSubSubMenu, textDir:"rtl"}));

			pMenu.addChild(new dijit.PopupMenuItem({label:"Submenu", popup:pSubMenu}));

			pMenu.startup();

				updateButtons(true);
			dojo.byId("prog_menu").innerHTML="This div has a programmatic context menu on it that's different to the page menu.";

			dojo.byId("createButton").disabled = true;
			dojo.byId("destroyButton").disabled = false;
		}

		function destroyMenu(){
			pMenu.destroyRecursive();
			updateButtons(false);
		}

		function updateButtons(created){
			dojo.byId("prog_menu").innerHTML=created?"This div has a programmatic context menu on it that's different to the page menu.":"No programmatic menu on this div, should get page level menu.";
			dojo.byId("createButton").disabled = created;
			dojo.byId("destroyButton").disabled = !created;
		}
		dojo.ready(function(){
			// need to explicitly update our buttons states, otherwise the
			// browser will remember the last states of them before reloading
			// (so a programmatic menu is created, reload, and "the create
			// programmatic menu" button is still in disabled state)
			updateButtons(false);

			doh.register("dijit.tests._BidiSupport.widget.MenuItem", [
				function test_LTR_TextDir(){
					doh.is(dijit.byId("open").get("textDir"), "ltr");
					doh.is(dijit.byId("open").textDirNode.dir, "ltr");
					doh.is(dijit.byId("navMenuComedy").get("textDir"), "ltr");
					doh.is(dijit.byId("navMenuComedy").textDirNode.dir, "ltr");
				},

				function test_LTR_TextDir_RTL_dir(){
					doh.is(dijit.byId("menu2").get("textDir"), "ltr");
					doh.is(dijit.byId("menu2").textDirNode.dir, "ltr");
				},

				function test_RTL_TextDir_LTR_dir(){
					doh.is(dijit.byId("menu1").get("textDir"), "rtl");
					doh.is(dijit.byId("menu1").textDirNode.dir, "rtl");
				},

				function test_RTL_TextDir(){
					doh.is(dijit.byId("new").get("textDir"), "rtl");
					doh.is(dijit.byId("new").textDirNode.dir, "rtl");
					doh.is(dijit.byId("navMenuDrama").get("textDir"), "rtl");
					doh.is(dijit.byId("navMenuDrama").textDirNode.dir, "rtl");
				},

				function test_AUTO_TextDir(){
					doh.is(dijit.byId("save").get("textDir"), "auto");
					doh.is(dijit.byId("save").textDirNode.dir, "ltr");
					doh.is(dijit.byId("saveas").get("textDir"), "auto");
					doh.is(dijit.byId("saveas").textDirNode.dir, "rtl");
				},

				function test_PopupMenuBarItem_TextDirLTR(){
					doh.is(dijit.byId("file").get("textDir"), "ltr");
					doh.is(dijit.byId("file").textDirNode.dir, "ltr");
				},

				function test_PopupMenuBarItem_TextDirRTL(){
					doh.is(dijit.byId("view").get("textDir"), "rtl");
					doh.is(dijit.byId("view").textDirNode.dir, "rtl");
				},

				function test_PopupMenuBarItem_TextDirAUTO(){
					doh.is(dijit.byId("empty").get("textDir"), "auto");
					doh.is(dijit.byId("empty").textDirNode.dir, "ltr");
				},

				function test_PopupMenuItem_TextDirRTL(){
					doh.is(dijit.byId("popupMenuItem").get("textDir"), "rtl");
					doh.is(dijit.byId("popupMenuItem").textDirNode.dir, "rtl");
				},

				function test_PopupMenuItem_TextDirAUTO(){
					doh.is(dijit.byId("navMenuDisabledItem").get("textDir"), "auto");
					doh.is(dijit.byId("navMenuDisabledItem").textDirNode.dir, "rtl");
				},

				function test_programmat_menuitem(){
					createMenu();
					doh.is(dijit.byId("progItemLtr").get("textDir"), "ltr");
					doh.is(dijit.byId("progItemLtr").textDirNode.dir, "ltr");
					doh.is(dijit.byId("progItemRtl").get("textDir"), "rtl");
					doh.is(dijit.byId("progItemRtl").textDirNode.dir, "rtl");
					doh.is(dijit.byId("progItemAuto1").get("textDir"), "auto");
					doh.is(dijit.byId("progItemAuto1").textDirNode.dir, "ltr");
					doh.is(dijit.byId("progItemAuto2").get("textDir"), "auto");
					doh.is(dijit.byId("progItemAuto2").textDirNode.dir, "rtl");
					destroyMenu();
				},

				function test_changeLabel_forAUTO(){
					var item = dijit.byId("saveas");
					doh.is(item.get("textDir"), "auto");
					doh.is(item.textDirNode.dir, "rtl");
					item.set("label", "");
					doh.is(item.textDirNode.dir, "ltr");
					item.set("label", "new label '\u05e9\u05d9\u05de\u05d5\u05e9\u0020\u05d1\u05ea\u05d2\u05d9\u05d5\u05ea\u002e'");
					doh.is(item.textDirNode.dir, "ltr");
					item.set("label", "'\u05e9\u05d9\u05de\u05d5\u05e9\u0020\u05d1\u05ea\u05d2\u05d9\u05d5\u05ea\u002e'");
					doh.is(item.textDirNode.dir, "rtl");
				}
			]);
			doh.run();
		});
	</script>
</head>
<body class="claro">

	<div id="windowContextMenu" data-dojo-type="dijit/Menu" data-dojo-props='contextMenuForWindow:true, style:"display: none;"'>
		<div data-dojo-type="dijit/MenuItem" data-dojo-props='onClick:function(){ console.log("Hello world"); }'> &#1506;&#1512;&#1498; &#1495;&#1491;&#1513; for context Menu</div>
		<div data-dojo-type="dijit/MenuSeparator"></div>
		<div data-dojo-type="dijit/MenuItem" data-dojo-props='disabled:true, onClick:function(){ alert("this should NOT appear"); }'>Disabled Item</div>
		<div data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut",
			onClick:function(){ console.log("not actually cutting anything, just a test!") }, accelKey:"Ctrl+X"' textDir="rtl" >Cut RTL...</div>
		<div data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCopy",
			onClick:function(){ console.log("not actually copying anything, just a test!") }, accelKey:"Ctrl+C"' textDir="ltr" >Copy LTR...</div>
		<div data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconPaste",
			onClick:function(){ console.log("not actually pasting anything, just a test!") }, accelKey:"Ctrl+V"' textDir="auto" >&#1495;&#1491;&#1513; AUTO...</div>
		<div data-dojo-type="dijit/MenuSeparator"></div>


	</div>


	<table id="formattingTable">
		<tr>
			<td style="width:0;">
				<!-- This is here for tabIndex testing.
					Use textarea since Chrome 1.0 likes it better for TABing and
					because it has innerText property and because it doesn't mess
					with the URL when clicked -->
				<textarea id="link" tabIndex="0" readOnly class="dijitReset" style="font-family:monospace;font-size:12px;width:84px;text-decoration:underline;overflow:hidden;background-color:transparent;" rows=1>random link</textarea>
			</td>
			<td id="menuBarContainer" style="width:100%;">
				<div id="menubar" data-dojo-type="dijit/MenuBar">
					<div id="file" data-dojo-type="dijit/PopupMenuBarItem" textDir="ltr">
						<span>File...</span>
						<div id="fileMenu" data-dojo-type="dijit/Menu" >
							<div id="new" data-dojo-type="dijit/MenuItem" textDir="rtl"  label="File RTL ..."></div>
							<div id="open" data-dojo-type="dijit/MenuItem" textDir="ltr">Open LTR ...</div>
							<div id="separator" data-dojo-type="dijit/MenuSeparator" ></div>
							<div id="save" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIconSave"'  textDir="auto">START AUTO &#1495;&#1491;&#1513;!...</div>
							<div id="saveas" data-dojo-type="dijit/MenuItem" textDir="auto" >&#1495;&#1491;&#1513; AUTO END...</div>
						</div>
					</div>
					<div id="view" data-dojo-type="dijit/PopupMenuBarItem" textDir="rtl" >
						<span>&#1495;&#1491;&#1513;...</span>
						<div id="viewMenu" data-dojo-type="dijit/Menu" >
							<div data-dojo-type="dijit/MenuItem">Normal w/o textDir....</div>
							<div id="popupMenuItem" data-dojo-type="dijit/PopupMenuItem" textDir="rtl">
								<span>Submenu test RTL &#1495;&#1491;&#1513;...</span>
								<div id="zoomMenu" data-dojo-type="dijit/Menu" >
									<div id="menu1" data-dojo-type="dijit/MenuItem" textDir="rtl" dir="ltr">&#1495;&#1491;&#1513; new RTL menu...</div>
									<div id="menu2" data-dojo-type="dijit/MenuItem" textDir="ltr" dir="rtl">&#1495;&#1491;&#1513; new LTR menu...</div>
									<div data-dojo-type="dijit/MenuItem" textDir="auto">&#1495;&#1491;&#1513; new Auto menu...</div>
								</div>
							</div>
						</div>
					</div>
					<div id="empty" data-dojo-type="dijit/PopupMenuBarItem" textDir="auto">
						<span>Empty auto &#1495;&#1491;&#1513;... </span>
						<div data-dojo-type="dijit/Menu">
						</div>
					</div>
					<div data-dojo-type="dijit/PopupMenuBarItem" data-dojo-props='disabled:true' textDir="rtl">
						<span>&#1495;&#1491;&#1513; Disabled RTL !!!</span>
						<div data-dojo-type="dijit/Menu">
							<div data-dojo-type="dijit/MenuItem">You should not see this</div>
						</div>
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td id="navMenuContainer" class="dijitMenu" style="vertical-align:top; width:0;">

				<h3 style="margin-bottom: 2em;">Navigation menu:</h3>
				<div id="navMenu" data-dojo-type="dijit/Menu" >
					<div id="navMenuDrama" data-dojo-type="dijit/MenuItem" textDir="rtl" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconPaste",
						onClick:function(){ console.log("drama!"); }'>Drama RTL ...</div>
					<div id="navMenuComedy"data-dojo-type="dijit/MenuItem" textDir="ltr" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut",
						onClick:function(){ console.log("comedy!") }'>Comedy LTR ...</div>

					<div id="navMenuDisabledItem" data-dojo-type="dijit/PopupMenuItem" textDir="auto" data-dojo-props='disabled:true '>
						<span>&#1495;&#1491;&#1513; new disabled submenu</span>
						<div id="navMenuSub3" data-dojo-type="dijit/Menu" data-dojo-props='style:"display: none;"'>
							<div data-dojo-type="dijit/MenuItem" data-dojo-props='onClick:function(){ console.log("Submenu 1!") }' textDir="auto">START AUTO &#1495;&#1491;&#1513;!...</div>
							<div data-dojo-type="dijit/MenuItem" data-dojo-props='onClick:function(){ console.log("Submenu 2!") }'>Submenu 2!</div>
						</div>
					</div>
					<div data-dojo-type="dijit/PopupMenuItem">
						<span>Different popup</span>
						<div data-dojo-type="dijit/ColorPalette"></div>
					</div>
					<div data-dojo-type="dijit/MenuSeparator"></div>
					<div data-dojo-type="dijit/CheckedMenuItem" textDir="rtl" data-dojo-props='checked:true, onChange:function(val){ console.log("Now set to " + val); }'>&#1495;&#1491;&#1513; checked RTL ...</div>
					<div id="checked2" data-dojo-type="dijit/CheckedMenuItem" >Not Checked</div>
					<div data-dojo-type="dijit/CheckedMenuItem" data-dojo-props='checked:true, disabled:true'>Checked Disabled</div>
				</div>
			</td>

			<td style="padding: 1em" id="contentContainer">

				<h1 class="testTitle">Test Bidi support for Menu Item</h1>

				<p>This page contains:</p>
				<ul>
					<li>"Navigation bar" Menu widget on left, a.k.a vertical MenuBar
					<li>MenuBar on top
					<li>page level context menu (right-click anywhere on page)
					<li>form widget context menu (right-click on textbox widget)</li>
					<li>Example of programatically created menu
					<li>Note: while some accelerator (shortcut) keys are displayed in the context menu, they are not actually hooked up to the corresponding actions (if any), they need to be setup explicitly by the user
				</ul>

				<div id="prog_menu" style="clear: both; border:1px solid blue; padding:10px; margin:20px 0;">
					Click button below to create special menu on this div.
				</div>
				<button id="createButton" onclick="createMenu();">create programmatic menu</button>
				<button id="destroyButton" onclick="destroyMenu();" disabled>destroy programmatic menu</button>
			</td>
		</tr>
	</table>
</body>
</html>
